<!-- 业务订单 -->
<template>
  <a-card :bordered="false" class="br-10">
    <div class="table-page-search">
      <a-form>
        <a-form-item label="订单编号">
          <a-input placeholder="请输入" v-model="queryParam.orderCode" allowClear />
        </a-form-item>
        <a-form-item label="业务类型">
          <a-select placeholder="请选择" v-model="queryParam.orderType" allowClear>
            <a-select-option v-for="item in orderTypeDict" :value="item.value" :key="item.value">{{
              item.label
            }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="订单状态">
          <a-select placeholder="请选择" v-model="queryParam.orderState" allowClear>
            <a-select-option
              v-for="dict in Dict.getLocal('orderStateDict')"
              :key="dict.dictValue"
              :value="dict.dictValue"
            >
              {{ dict.dictLabel }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="付款时间">
          <a-range-picker format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" v-model="payTime" allowClear class="width-25" />
        </a-form-item>
        <span class="search-submitButtons">
          <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
          <a-button @click="handleReset">重置</a-button>
        </span>
      </a-form>
    </div>
    <div class="table-operator disFlxJS">
      <div></div>
      <CustomTable :name="$route.name" :columns="columns" :newColumns="newColumns" />
    </div>
    <s-table size="default" ref="table" rowKey="dictId" :columns="newColumns" :data="loadData" :scroll="{ y: '530px',x:'500px' }">
      <!-- 业务类型 -->
      <span slot="orderType" slot-scope="text">
        {{ text | getOrderTypeText }}
      </span>

      <!-- 订单金额 -->
      <span slot="totalMoney" slot-scope="text"> {{ text }}元 </span>

      <!-- 实付金额 -->
      <span slot="payMoney" slot-scope="text"> {{ text }}元 </span>

      <!-- 订单状态 -->
      <span slot="orderState" slot-scope="text">
        <DictTag :options="Dict.getLocal('orderStateDict')" :value="text" />
      </span>

      <!-- 退款状态 -->
      <span slot="refundStatus" slot-scope="text">
        <DictTag :options="Dict.getLocal('orderRefundStatusDict')" :value="text" isText />
      </span>

      <!-- 支付方式 -->
      <span slot="payMode" slot-scope="text">
        {{ text | getPayModeText }}
      </span>

      <span slot="action" slot-scope="text, record">
        <a-button v-has="'order:businessOrderDetail'" size="small" class="_mr-5" @click="handleDetail(record)">
          订单详情
        </a-button>
        <a-button
          v-has="'order:businessOrderAccount'"
          type="primary"
          ghost
          size="small"
          @click="handleToAccount(record)"
        >
          结算分润
        </a-button>
      </span>
    </s-table>
    <EditMoneyModal ref="editMoney" @reload="$refs.table.refresh(true)" />
  </a-card>
</template>

<script>
import { STable } from '@/components'
import EditMoneyModal from '../../components/editMoney'
import { BusinessOrderList, orderTypeDict, payModeDict } from '@/api/order/order'
import CustomTable from '@/components/Cuscolumn'
import DictTag from '@/components/DictTag'

export default {
  components: {
    STable,
    EditMoneyModal,
    CustomTable,
    DictTag
  },
  data() {
    return {
      // 查询参数
      queryParam: {
        orderCode: undefined,
        orderType: undefined,
        orderState: undefined,
        startTime: undefined,
        endTime: undefined
      },
      // 表头
      columns: [
        {
          title: '订单编号',
          dataIndex: 'orderCode',
          width: 230
        },
        {
          title: '商品名称',
          dataIndex: 'productName',
          width: 200
        },
        {
          title: '业务类型',
          dataIndex: 'orderType',
          scopedSlots: { customRender: 'orderType' },
          width: 120
        },
        {
          title: '创建人',
          dataIndex: 'userName',
          width: 120
        },
        {
          title: '创建人电话',
          dataIndex: 'userPhone',
          width: 150
        },
        {
          title: '订单金额',
          dataIndex: 'totalMoney',
          scopedSlots: { customRender: 'totalMoney' },
          width: 120
        },
        {
          title: '实付金额',
          dataIndex: 'payMoney',
          scopedSlots: { customRender: 'payMoney' },
          width: 120
        },
        {
          title: '订单状态',
          dataIndex: 'orderState',
          scopedSlots: { customRender: 'orderState' },
          width: 120
        },
        {
          title: '退款状态',
          dataIndex: 'refundStatus',
          scopedSlots: { customRender: 'refundStatus' },
          width: 120
        },
        {
          title: '支付方式',
          dataIndex: 'payMode',
          scopedSlots: { customRender: 'payMode' },
          width: 120
        },
        {
          title: '提交时间',
          dataIndex: 'createTime',
          width: 180
        },
        {
          title: '付款时间',
          dataIndex: 'payTime',
          width: 180
        },
        {
          title: '订单来源',
          dataIndex: 'sourceOrgName',
          width: 180
        },
        {
          title: '项目归属',
          dataIndex: 'orgName',
          width: 180
        },
        {
          title: '操作',
          width: '170px',
          fixed: 'right',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      orderMenuVal: 'connections',
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        var params = {
          current: parameter.pageNum,
          size: parameter.pageSize
        }
        return BusinessOrderList(Object.assign(params, this.queryParam))
      },
      orderTypeDict
    }
  },
  filters: {
    getOrderTypeText(text) {
      const item = orderTypeDict.find(v => v.value === text)
      return item ? item.label : ''
    },
    getPayModeText(text) {
      const item = payModeDict.find(v => v.value === text)
      return item ? item.label : ''
    }
  },
  computed: {
    payTime: {
      get() {
        return [this.queryParam.startTime, this.queryParam.endTime]
      },
      set(val) {
        this.queryParam.startTime = val[0]
        this.queryParam.endTime = val[1]
      }
    },
    newColumns() {
      const currentColumns = this.$store.state.user.customTable
      if (currentColumns && currentColumns[this.$route.name]) {
        return this.$options
          .data()
          .columns.filter(v => {
            const _items = currentColumns[this.$route.name].find(item => item === v.title || item.title === v.title)
            if (_items) return Object.assign(v, _items)
          })
          .sort((a, b) => {
            return a.tableSort - b.tableSort
          })
      } else {
        return this.columns
      }
    }
  },
  created() {},
  methods: {
    handleReset() {
      Object.keys(this.queryParam).forEach(k => {
        this.queryParam[k] = undefined
      })
      this.$refs.table.refresh(true)
    },
    handleDetail(row) {
      this.$router.push({
        path: '/order/businessOrderDetail',
        query: {
          orderCode: row.orderCode
        }
      })
    },
    handleToAccount(row) {
      this.$router.push({
        path: '/order/businessOrderAccount',
        query: {
          orderCode: row.orderCode
        }
      })
    }
  }
}
</script>
